<template>
  <div class="search-header">
    <div class="search" @click="toSeek">
      <div class="iconsearch">
        <span class="iconfont icon-sousuo"></span>
      </div>
      <input type="text" class="input" placeholder="搜索" />
    </div>
    <div class="avatar">
      <div class="circle" @click="toUser">
        <span class="iconfont icon-wode" v-if="!avatarUrl"></span>
        <img :src="avatarUrl" alt="" v-if="avatarUrl" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchHeader",
  data() {
    return {
      avatarUrl: "",
    };
  },
  mounted() {
    this.loadAvatar();
  },
  methods: {
    toUser() {
      this.$router.push("/user");
    },
    loadAvatar() {
      if (localStorage.username) {
        this.avatarUrl = "https://z3.ax1x.com/2021/04/28/giNFDe.jpg";
      }
    },
    toSeek() {
      this.$router.push("/seek");
    },
  },
};
</script>
<style lang="scss" scoped>
.search-header {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  .search {
    background: $bgGray;
    padding: 4vw;
    box-sizing: border-box;
    border-radius: 1rem;
    margin-left: 4vw;
    display: flex;
    height: 0.64rem;
    flex: 4;
    align-items: center;
    .iconsearch {
    }
    .input {
      margin-left: 2vh;
      border: none;
      background: none;
      font-size: 0.32rem;
      flex: 1;
    }
  }
  .avatar {
    flex: 1;
    .circle {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ddd;
      height: 0.56rem;
      color: white;
      width: 0.56rem;
      border-radius: 50%;
      margin-left: 2vw;
      box-shadow: 0 1px 8px $fontGrayColor;
      img {
        width: 0.56rem;
        border-radius: 50%;

        height: 0.56rem;
      }
    }
  }
}
</style>